<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>医生坐诊信息</title>

    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
    </style>

</head>
<body>
    <div id="app">
        <el-button type="text" @click="dialogSitVisible = true">新增坐诊</el-button>
        <el-dialog title="新增坐诊" :visible.sync="dialogSitVisible">
            <el-form :model="sit">
                <el-form-item label="星期" :label-width="formLabelWidth">
                    <el-select v-model="sit.dayOfWeek" placeholder="请选择星期" >
                        <el-option label="星期一" value="星期一"></el-option>
                        <el-option label="星期二" value="星期二"></el-option>
                        <el-option label="星期三" value="星期三"></el-option>
                        <el-option label="星期四" value="星期四"></el-option>
                        <el-option label="星期五" value="星期五"></el-option>
                        <el-option label="星期六" value="星期六"></el-option>
                        <el-option label="星期天" value="星期天"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="上/下午" :label-width="formLabelWidth">
                    <el-select v-model="sit.amorPM" placeholder="请选择上/下午" >
                        <el-option label="上午" value="上午"></el-option>
                        <el-option label="下午" value="下午"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="日期" :label-width="formLabelWidth">
                    <template>
                        <div class="block">
                            <span class="demonstration">默认</span>
                            <el-date-picker
                                    v-model="sit.date"
                                    type="date"
                                    placeholder="选择日期">
                            </el-date-picker>
                        </div>
                    </template>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogSitVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSit">添加</el-button>
            </div>
        </el-dialog>


        <template>
            <el-table
                    :data="sits"
                    style="width: 100%"
                    :row-class-name="tableRowClassName">
                <el-table-column
                        prop="dayOfWeek"
                        label="星期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="amorPM"
                        label="上/下午"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="date"
                        label="日期">
                </el-table-column>

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)">添加医生坐诊</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>


        <el-dialog title="添加医生坐诊" :visible.sync="dialogTableVisible">
            <el-table :data="doctors">
                <el-table-column property="doctorNum" label="医生编号" width="150"></el-table-column>
                <el-table-column property="doctorName" label="姓名" width="200"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handAdd(scope.$index, scope.row)">添加医生坐诊</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="总量" :visible.sync="dialogallNumVisible">
            <el-form :model="doctorSit">
                <el-form-item label="总量" :label-width="formLabelWidth">
                    <el-input v-model="doctorSit.allNum" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogallNumVisible = false">取 消</el-button>
                <el-button type="primary" @click="handAdd2">确 定</el-button>
            </div>
        </el-dialog>
    </div>

    <script src="../js/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="../js/axios-0.18.0.js"></script>

    <script>
        new Vue({
            el:"#app",

            data() {
                return {
                    pickerOptions: {
                        disabledDate(time) {
                            return time.getTime() > Date.now();
                        },
                    },
                    sit: {},
                    dialogSitVisible: false,
                    formLabelWidth: '120px',
                    sits: [],
                    doctor:{},
                    doctors: [],
                    doctorSit: {
                        doctorID:"",
                        sitID:"",
                        remainNum:"",
                        allNum:""
                    },
                    doctorSits: [],
                    dialogTableVisible: false,
                    dialogallNumVisible:false
                }
            },

            methods: {
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex === 1) {
                        return 'warning-row';
                    } else if (rowIndex === 3) {
                        return 'success-row';
                    }
                    return '';
                },

                selectAll() {
                    axios.get("http://localhost:8080/sit/selectAll").then(resp=>{
                        this.sits = resp.data;
                        // console.log(this.sits);
                    })
                },

                handleEdit(index, row) {
                    this.doctorSit.sitID = row.sitInforID;
                    axios.post("http://localhost:8080/users/selectAllDoctor",this.doctor).then(resp=>{
                        this.doctors = resp.data.data;
                    })
                    this.dialogTableVisible = true;
                },
                handleDelete(index, row) {
                    console.log(index, row);
                },
                handAdd(index,row){
                    this.doctorSit.doctorID =  row.doctorID;
                    this.dialogallNumVisible = true;

                },
                handAdd2(){
                    this.doctorSit.remainNum = this.doctorSit.allNum;
                    console.log(this.doctorSit);
                    axios.post("http://localhost:8080/doctorSit/addDoctorSit",this.doctorSit).then(resp=>{
                        if(resp.data === 1){
                            this.$message.success("添加成功");
                            this.dialogallNumVisible = false;
                        }else{
                            this.$message.error("你已经添加了该坐诊");
                        }
                    })

                },

                addSit(){
                    axios.post("http://localhost:8080/sit/addSit",this.sit).then(resp=>{
                        console.log(this.sit);
                        if( resp.data ===  1){
                            this.$message.success("增加成功");
                            this.dialogSitVisible = false;
                            this.selectAll();
                        }else{
                            this.$message.error("增加失败");
                        }
                    })
                }
            },
            mounted(){
                this.selectAll();
            }
        })
    </script>
</body>
</html>